<template>
  <el-container class="allpage">
    <el-header>
      <el-row class="position-fixed">
        <el-button style="border: none;margin-top: 2px">
          <div style="height: 40px;width: 30px;">
            <img src="~@/assets/icons/imageicon/1.png" style="height: 28px;margin-top: 0px">
            <div style="margin-bottom: 10px">房间</div>
          </div>
        </el-button>

        <el-button style="border: none;margin-top: 2px;margin-left: 2px">
          <div style="height: 30px;width: 30px;">
            <img src="~@/assets/icons/imageicon/2.png" style="height: 28px;margin-top: 0px">
            <div style="margin-bottom: 10px">软饮</div>
          </div>
        </el-button>

        <el-button style="border: none;margin-top: 2px;margin-left: 2px">
          <div style="height: 40px;width: 30px;">
            <img src="~@/assets/icons/imageicon/8.png" style="height: 30px;margin-top: 0px">
            <div style="margin-bottom: 10px">香烟</div>
          </div>
        </el-button>

        <el-button style="border: none;margin-top: 2px;margin-left: 2px">
          <div style="height: 40px;width: 30px;">
            <img src="~@/assets/icons/imageicon/4.png" style="height: 30px;margin-top: 0px">
            <div style="margin-bottom: 10px">酒水</div>
          </div>
        </el-button>

        <el-button style="border: none;margin-top: 2px;margin-left: 2px">
          <div style="height: 40px;width: 30px;">
            <img src="~@/assets/icons/imageicon/7.png" style="height: 28px;margin-top: 0px;margin-left: 6px">
            <div style="margin-bottom: 10px;margin-left: 6px">茶水</div>
          </div>
        </el-button>

        <el-button style="border: none;margin-top: 2px;margin-left: 2px">
          <div style="height: 30px;width: 30px;">
            <img src="~@/assets/icons/imageicon/11.png" style="height: 25px;margin-top: 0px">
            <div style="margin-bottom: 10px;margin-left: 2px">食品</div>
          </div>
        </el-button>
      </el-row>
    </el-header>

    <el-container>
      <el-aside>
        <div class="textout">
        <div class="text1">
          <el-row class="button-list1">
            <el-button plain style="height: 80px;width: 125px;border: #1e1e1e;color: purple;margin-top: 5px" class="button1">
              <div>02021</div>
              <div>麦饭石鸡蛋</div>
              <div>3.00</div>
            </el-button>
            <el-button type="primary" plain style="height: 80px;width: 125px;">
              <div>02022</div>
              <div>麦饭石鸡蛋4个</div>
              <div>10.00</div>
            </el-button>
            <el-button type="success" plain style="height: 80px;width: 125px; color: green">
              <div>02028</div>
              <div>德氏奶葩</div>
              <div>5.00</div>
            </el-button>
            <el-button type="info" plain style="height: 80px;width: 125px; color: dimgrey">
              <div>02064</div>
              <div>会员果盘赠</div>
              <div>0.00</div>
            </el-button>
          </el-row>

          <el-row class="button-list2" >
            <el-button type="warning" plain style="height: 80px;width: 125px; color: darkorange">
              <div>15045</div>
              <div>爆米花</div>
              <div>10.00</div>
            </el-button>
            <el-button plain style="height: 80px;width: 125px;border: #1e1e1e;color: purple" class="button1">
              <div>15077</div>
              <div>德氏雪顶杯</div>
              <div>6.00</div>
            </el-button>
            <el-button type="primary" plain style="height: 80px;width: 125px;">
              <div>15078</div>
              <div>德氏神马菠萝</div>
              <div>3.00</div>
            </el-button>
            <el-button type="success" plain style="height: 80px;width: 125px; color: green">
              <div>15079</div>
              <div>德氏鸡蛋</div>
              <div>3.00</div>
            </el-button>
          </el-row>

          <el-row class="button-list2">
            <el-button type="info" plain style="height: 80px;width: 125px; color: dimgrey">
              <div>15080</div>
              <div>德氏鳄鱼</div>
              <div>4.00</div>
            </el-button>
            <el-button type="warning" plain style="height: 80px;width: 125px; color: darkorange">
              <div>15081</div>
              <div>德氏小屋</div>
              <div>5.00</div>
            </el-button>
            <el-button plain style="height: 80px;width: 125px;border: #1e1e1e;color: purple" class="button1">
              <div>15082</div>
              <div>小奶糕</div>
              <div>2.00</div>
            </el-button>
            <el-button type="primary" plain style="height: 80px;width: 125px;">
              <div>20001</div>
              <div>榨菜</div>
              <div>3.00</div>
            </el-button>
          </el-row>

          <el-row class="button-list2">
            <el-button type="success" plain style="height: 80px;width: 125px; color: green">
            <div>20002</div>
            <div>八宝粥</div>
            <div>10.00</div>
          </el-button>
            <el-button type="info" plain style="height: 80px;width: 125px; color: dimgrey">
            <div>20003</div>
            <div>香肠</div>
            <div>5.00</div>
          </el-button>
            <el-button type="warning" plain style="height: 80px;width: 125px; color: darkorange">
              <div>20004</div>
              <div>碗面</div>
              <div>10.00</div>
            </el-button>
            <el-button plain style="height: 80px;width: 125px;border: #1e1e1e;color: purple" class="button1">
              <div>20005</div>
              <div>中果盘</div>
              <div>69.00</div>
            </el-button>
          </el-row>

          <el-row class="button-list2">
            <el-button type="primary" plain style="height: 80px;width: 125px;">
              <div>20011</div>
              <div>大果盘</div>
              <div>99.00</div>
            </el-button>
            <el-button type="success" plain style="height: 80px;width: 125px; color: green">
              <div>20019</div>
              <div>小果盘</div>
              <div>39.00</div>
            </el-button>
            <el-button type="info" plain style="height: 80px;width: 125px; color: dimgrey">
              <div>02865</div>
              <div>会员果盘赠</div>
              <div>0.00</div>
            </el-button>
              <el-button type="warning" plain style="height: 80px;width: 125px; color: darkorange">
                <div>20004</div>
                <div>碗面</div>
                <div>10.00</div>
              </el-button>
          </el-row>

          <el-row class="button-list2" >
            <el-button plain style="height: 80px;width: 125px;border: #1e1e1e;color: purple" class="button1">
              <div>20005</div>
              <div>中果盘</div>
              <div>69.00</div>
            </el-button>
            <el-button type="primary" plain style="height: 80px;width: 125px;">
              <div>20011</div>
              <div>大果盘</div>
              <div>99.00</div>
            </el-button>
            <el-button type="success" plain style="height: 80px;width: 125px; color: green">
              <div>20019</div>
              <div>小果盘</div>
              <div>39.00</div>
            </el-button>
            <el-button type="info" plain style="height: 80px;width: 125px; color: dimgrey">
              <div>02865</div>
              <div>会员果盘赠</div>
              <div>0.00</div>
            </el-button>
          </el-row>

          <el-row class="button-list2" >
            <el-button plain style="height: 80px;width: 125px;border: #1e1e1e;color: purple" class="button1">
              <div>20005</div>
              <div>中果盘</div>
              <div>69.00</div>
            </el-button>
            <el-button type="primary" plain style="height: 80px;width: 125px;">
              <div>20011</div>
              <div>大果盘</div>
              <div>99.00</div>
            </el-button>
            <el-button type="success" plain style="height: 80px;width: 125px; color: green">
              <div>20019</div>
              <div>小果盘</div>
              <div>39.00</div>
            </el-button>
            <el-button type="info" plain style="height: 80px;width: 125px; color: dimgrey">
              <div>02865</div>
              <div>会员果盘赠</div>
              <div>0.00</div>
            </el-button>
          </el-row>


        </div>
        <div class="text2">
          <div class="text4">
          <input
            :value="input"
            class="input"
            @input="onInputChange"
            placeholder="请输入商品名称"
          ></div>
          <div class="text3">
            <SimpleKeyboard @onChange="onChange" @onKeyPress="onKeyPress" :input="input"/>
          </div>

        </div>

        </div>
      </el-aside>

      <el-container>
        <el-main>
          <div>
            <span style="margin-bottom: 1px">录单员工 : </span>
            <span>2009-张吉花</span>
            <el-divider class="divide"></el-divider>
          </div>

          <el-table
            :data="tableData"
            height="360"
            border
            show-summary
            style="width: 1150px"
          class="listtable">
            <el-table-column
              prop="id"
              label="ID"
              width="180">
            </el-table-column>
            <el-table-column
              prop="name"
              label="名称"
              width="180">
            </el-table-column>
            <el-table-column
              prop="number"
              label="数量">
            </el-table-column>
            <el-table-column
              prop="amount1"
              sortable
              label="金额">
            </el-table-column>
            <el-table-column
              prop="amount2"
              sortable
              label="技师">
            </el-table-column>
            <el-table-column
              prop="amount3"
              sortable
              label="做法">
            </el-table-column>
          </el-table>
          <div class="paint" style="margin-top: 10px;text-align: center">
            <div>
              <span style="margin-bottom: 1px;font-size: 25px">热卖商品</span>
              <el-divider class="divide"></el-divider>
            </div>
            <img src="~@/assets/icons/imageicon/1111.png" style="height: 288px;margin-top: 0px">
          </div>

        </el-main>
      </el-container>
    </el-container>
  </el-container>

</template>

<script>
import SimpleKeyboard from "./SimpleKeyboard";
import "./App.css";

export default {
  name: "App",
  components: {
    SimpleKeyboard
  },
  data(){
    return {
      input: "",
      tableData: [{
        id: '02028',
        name: '徳氏奶葩',
        number: '2',
        amount1: '5.0',
        amount2: '一一',
        amount3: '无'
      }, {
        id: '02028',
        name: '徳氏奶葩',
        number: '2',
        amount1: '5.0',
        amount2: '二二',
        amount3: '无'
      }, {
        id: '02028',
        name: '徳氏奶葩',
        number: '2',
        amount1: '5.0',
        amount2: '三三',
        amount3: '无'
      }, {
        id: '02028',
        name: '徳氏奶葩',
        number: '2',
        amount1: '5.0',
        amount2: '四四',
        amount3: '无'
      },{
        id: '02028',
        name: '徳氏奶葩',
        number: '2',
        amount1: '5.0',
        amount2: '四四',
        amount3: '无'
      },{
        id: '02028',
        name: '徳氏奶葩',
        number: '2',
        amount1: '5.0',
        amount2: '四四',
        amount3: '无'
      }, {
        id: '02028',
        name: '徳氏奶葩',
        number: '2',
        amount1: '5.0',
        amount2: '五五',
        amount3: '无'
      }]
    }
  },
  methods: {
    getSummaries(param) {
      const {columns, data} = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '总价';
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] += ' 元';
        } else {
          sums[index] = 'N/A';
        }
      });

      return sums;
    },
    onChange(input) {
      this.input = input;
    },
    onKeyPress(button) {
      console.log("button", button);
    },
    onInputChange(input) {
      this.input = input.target.value;
    }

  }
}
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.allpage{
  /*position: fixed;*/
  margin-left: 5px;
  margin-right: 10px;

}
.el-header{
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 5px;
  background-color: #FFFFFF;
}

.el-aside {
  background-color: #E9EEF3;
  min-width:600px;
  margin-left: 10px;
  margin-right: 5px;
  margin-top: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  position: inherit;
}

.el-main {
  background-color: #FFFFFF;
  color: #333;
  width: 1225px;
  margin-right: 5px;
  margin-top: 10px;
  margin-left: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  position: inherit;
}
.el-aside,.el-main{
  height: 765px;
  margin-bottom: 10px;
}
.text1{
  height: 515px;
  border-radius: 4px;
  margin-bottom: 5px;
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);

}

.text2{
  height: 230px;
  width: 552px;
  border-radius: 4px;
  margin-bottom: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  position: inherit;
}
.text3{
  height: 155px;
  margin-top: 5px;
  margin-left: 5px;
  margin-right: 5px;
  border-radius: 4px;
  position: inherit;

}
.iconstyle{
  margin-top: 5px;
}
.position-fixed{
  position: inherit;
  margin-bottom: 5px;
  margin-top: 10px;
}
.listtable{
  margin-top: 1px;
  overflow-y: auto;
  overflow-x: hidden;
  position: inherit;
}
.divide{
  margin-top: 4px;
  margin-bottom: 10px;
}
.button-list1{
  text-align: center;
}
.button-list2{
  margin-top: 5px;
  text-align: center;
  margin-bottom: 5px;

}
.button1{
  background-color: #ebd4ef;
  border: #9c26b0;
}
::-webkit-scrollbar{
  width: 0!important;
}
::-webkit-scrollbar{
  width: 0!important;height: 0;
}

</style>

